import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import {
  Settings,
  Activity,
  Shield,
  Server,
  Database,
  Users,
  BarChart3,
  AlertTriangle
} from 'lucide-react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/Card'
import { Button } from '../components/ui/Button'
import { Badge } from '../components/ui/Badge'

interface AdminPanelProps {
  authFetch: (url: string, options?: RequestInit) => Promise<Response>
}

export function AdminPanel({ authFetch }: AdminPanelProps) {
  const { t } = useTranslation()
  const location = useLocation()
  const [systemStats, setSystemStats] = useState<any>(null)

  const adminSections = [
    {
      title: t('admin.sections.systemAudit.title'),
      description: t('admin.sections.systemAudit.description'),
      icon: Activity,
      href: '/admin/audit',
      color: 'bg-blue-500'
    },
    {
      title: t('admin.sections.security.title'),
      description: t('admin.sections.security.description'),
      icon: Shield,
      href: '/admin/security',
      color: 'bg-red-500'
    },
    {
      title: t('admin.sections.systemHealth.title'),
      description: t('admin.sections.systemHealth.description'),
      icon: Server,
      href: '/admin/health',
      color: 'bg-green-500'
    },
    {
      title: t('admin.sections.dataManagement.title'),
      description: t('admin.sections.dataManagement.description'),
      icon: Database,
      href: '/admin/data',
      color: 'bg-purple-500'
    },
    {
      title: t('admin.sections.userManagement.title'),
      description: t('admin.sections.userManagement.description'),
      icon: Users,
      href: '/admin/users',
      color: 'bg-orange-500'
    },
    {
      title: t('admin.sections.analytics.title'),
      description: t('admin.sections.analytics.description'),
      icon: BarChart3,
      href: '/admin/analytics',
      color: 'bg-teal-500'
    }
  ]

  return (
    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold tracking-tight">{t('admin.title')}</h1>
        <p className="text-muted-foreground mt-1">
          {t('admin.subtitle')}
        </p>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t('admin.quickStats.systemStatus.title')}</CardTitle>
            <Server className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full" />
              <span className="text-sm font-medium">{t('admin.quickStats.systemStatus.healthy')}</span>
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              {t('admin.quickStats.systemStatus.allSystemsOperational')}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t('admin.quickStats.securityLevel.title')}</CardTitle>
            <Shield className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="flex items-center space-x-2">
              <Badge variant="outline" className="text-xs">
                {t('admin.quickStats.securityLevel.standard')}
              </Badge>
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              {t('admin.quickStats.securityLevel.authenticationEnabled')}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t('admin.quickStats.activeSessions.title')}</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">1</div>
            <p className="text-xs text-muted-foreground">
              {t('admin.quickStats.activeSessions.currentAdminSession')}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t('admin.quickStats.alerts.title')}</CardTitle>
            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">0</div>
            <p className="text-xs text-muted-foreground">
              {t('admin.quickStats.alerts.noActiveAlerts')}
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Admin Sections */}
      <div>
        <h2 className="text-xl font-semibold mb-6">{t('admin.sections.title', 'Administration Tools')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {adminSections.map((section) => {
            const Icon = section.icon
            const isActive = location.pathname === section.href
            
            return (
              <Link key={section.href} to={section.href}>
                <Card className={`group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 ${
                  isActive ? 'ring-2 ring-primary' : ''
                }`}>
                  <CardHeader>
                    <div className="flex items-center space-x-4">
                      <div className={`w-12 h-12 rounded-lg ${section.color} flex items-center justify-center text-white group-hover:scale-110 transition-transform`}>
                        <Icon className="w-6 h-6" />
                      </div>
                      <div className="flex-1">
                        <CardTitle className="text-lg">{section.title}</CardTitle>
                        <CardDescription className="mt-1">
                          {section.description}
                        </CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                </Card>
              </Link>
            )
          })}
        </div>
      </div>

      {/* Recent Activity */}
      <Card>
        <CardHeader>
          <CardTitle>{t('admin.recentActivity.title')}</CardTitle>
          <CardDescription>
            {t('admin.recentActivity.subtitle')}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center space-x-4 p-3 rounded-lg bg-muted/50">
              <div className="w-2 h-2 bg-green-500 rounded-full" />
              <div className="flex-1">
                <p className="text-sm font-medium">{t('admin.recentActivity.systemStarted')}</p>
                <p className="text-xs text-muted-foreground">{t('admin.recentActivity.allPluginsLoaded')}</p>
              </div>
              <span className="text-xs text-muted-foreground">{t('admin.recentActivity.justNow')}</span>
            </div>

            <div className="flex items-center space-x-4 p-3 rounded-lg bg-muted/50">
              <div className="w-2 h-2 bg-blue-500 rounded-full" />
              <div className="flex-1">
                <p className="text-sm font-medium">{t('admin.recentActivity.adminSessionStarted')}</p>
                <p className="text-xs text-muted-foreground">{t('admin.recentActivity.administratorLoggedIn')}</p>
              </div>
              <span className="text-xs text-muted-foreground">{t('admin.recentActivity.minutesAgo', { count: 2 })}</span>
            </div>
          </div>

          <div className="mt-4 pt-4 border-t">
            <Link to="/admin/audit">
              <Button variant="outline" className="w-full">
                {t('admin.recentActivity.viewFullAuditLog')}
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>

      {/* System Information */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>{t('admin.systemInfo.title')}</CardTitle>
            <CardDescription>
              {t('admin.systemInfo.subtitle')}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">{t('admin.systemInfo.platformVersion')}</span>
              <span className="text-sm font-medium">bai-hu v0.1.0</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">{t('admin.systemInfo.nodeVersion')}</span>
              <span className="text-sm font-medium">{typeof process !== 'undefined' ? process.version : t('admin.systemInfo.unknown')}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">{t('admin.systemInfo.environment')}</span>
              <Badge variant="outline">{t('admin.systemInfo.development')}</Badge>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">{t('admin.systemInfo.uptime')}</span>
              <span className="text-sm font-medium">{t('admin.systemInfo.running')}</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t('admin.quickActions.title')}</CardTitle>
            <CardDescription>
              {t('admin.quickActions.subtitle')}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button variant="outline" className="w-full justify-start">
              <Settings className="w-4 h-4 mr-2" />
              {t('admin.quickActions.systemConfiguration')}
            </Button>
            <Button variant="outline" className="w-full justify-start">
              <Database className="w-4 h-4 mr-2" />
              {t('admin.quickActions.backupSystemData')}
            </Button>
            <Button variant="outline" className="w-full justify-start">
              <Activity className="w-4 h-4 mr-2" />
              {t('admin.quickActions.exportAuditLogs')}
            </Button>
            <Button variant="outline" className="w-full justify-start">
              <Shield className="w-4 h-4 mr-2" />
              {t('admin.quickActions.securityScan')}
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
